<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>单品</title>
    <link rel="stylesheet" type="text/css" href="main5(单品).css "/>
    <script type="text/javascript "  src="js/jquery.js"></script>
    <script type="text/javascript " src="js/main.js"></script>
    <!--<script type="text/javascript " src="js/jquery-2.2.4 (1).js"></script>-->


</head>
<body>
<div id="all">
    <div class="top">
        <div class="container">
            <ul class="drop"  >
                <li  class="drop-menu" style="position:absolute;left:1000px;">
                    <a  class="jiamiao123"  style="position:absolute;left:0px;top:10px;" href="javascript:void(0)">jiamiao123 </a>
                    <ul class="drop-contenta">
                        <li><a href="#">个人设置</a></li>
                        <li><a href="#">账号绑定</a></li>
                        <li><a href="#">退出</a></li>

                    </ul>
                </li>
                <li   style="position:absolute;left:1080px;top:10px;">消息 <a style="color:red;" href="">2</a> |</li>

                <li class="drop-menu">
                    <a  class="a" style="position:absolute;left:1160px;top:10px;" href="javascript:void(0)">我的收藏  |</a>
                    <ul  class="drop-contentb">

                        <li><a  href="#">收藏的商品</a></li>
                        <li><a href="#">收藏的小店</a></li>
                        <li><a href="#">浏览足记</a></li>

                    </ul>
                </li>

                <li   style="position:absolute;left:1240px;top:10px;">我的订单  |</li>
                <li   style="position:absolute;left:1310px;top:10px;">
                    <img  style="width:20px;height:20px;top:10px;"src="img2/11.jpg" alt=""/>购物车1件  |</li>

                <li class="drop-menu">
                    <a  class="kehu" style="position:absolute;left:1400px;top:10px;"href="javascript:void(0)">客户服务   |</a>
                    <ul  class="drop-contentc" >

                        <li><a href="#">消费者服务</a></li>
                        <li><a href="#">商家服务</a></li>
                        <li><a href="#">规则中心</a></li>

                    </ul>
                </li>

                <li class="drop-menu">
                    <img style="width:20px;height:20px;top:10px;position:absolute;left:1460px;"src="img2/12.jpg" alt=""/>
                    <a  class="xiaodian"  style="position:absolute;left:1480px;top:10px;" href="">我的小店  |</a>
                    <ul  class="drop-contentd" >

                        <li><a href="#">管理后台</a></li>
                        <li><a href="#">商家社区</a></li>
                        <li><a href="#">商家培训</a></li>
                        <li><a href="#">市场入驻</a></li>

                    </ul>
                </li>

            </ul>
            <div class="clr"></div>


        </div>

    </div>


    <div class="one">
        <div class="one1">
            <img   style="width:50px;height:50px;border-radius:50%;position:absolute;left:330px;top:70px;"
            src="img3/5.jpg" alt=""/>
            <p  style="position:absolute;left:390px;top:70px;font-size:20px;color:black;"> 女生街</p>
            <div>
                <ul style="position:absolute;left:390px;top:90px;">
                    <li>描述<a style="color:red;"  href="">4.57</a></li>

                </ul>
                <ul  style="position:absolute;left:450px;top:90px;">
                    <li>价格<a style="color:red;"  href="">4.57</a></li>

                </ul>
                <ul style="position:absolute;left:505px;top:90px;">
                    <li>质量<a style="color:red;"  href="">4.6</a></li>

                </ul>
                <ul style="position:absolute;left:550px;top:90px;">
                    <li>服务<a style="color:red;"  href="">4.6</a></li>

                </ul>

            </div>

            <input style="width:40px;height:15px;position:absolute;left:600px;top:80px;"  type="text" value="收藏"/>
            <input style="width:40px;height:15px;position:absolute;left:650px;top:80px;" type="text" value="私聊"/>




        </div>
        <div  class="one2">
            <input  style="position:absolute;left:1100px;top:90px;width:350px;height:25px;border:1px solid red;"type="text" value="输入你想要的商品"/>
            <input style="position:absolute;left:1400px;top:90px;height:25px;width:80px;
            background-color:red;border:1px solid red;color:white;"type="text" value="搜全站"/>
            <input style="position:absolute;border:1px solid red;width:50px;height:25px;left:1500px;top:90px;color:red;"type="text"  value="搜本店"/>

            
        </div>


    </div>

    <div class="two">
        <div class="two1">
            <p1 style="position:absolute;left:340px;font-size:30px;color:black;top:200px;"><b>收藏店铺</b></p1>

            <p2 style="position:absolute;left:840px;font-size:70px;color:black;top:180px;"><b>女生街</b></p2>
            <p3 style="position:absolute;left:840px;font-size:40px;top:250px;margin-left:-80px;color:black;"><a href="">N</a>
                <a style="margin-left:20px;"   href="">V</a>
                <a style="margin-left:20px;" href="">S</a>
                <a style="margin-left:20px;" href="">H</a>
                <a style="margin-left:20px;" href="">E</a>
                <a style="margin-left:20px;" href="">N</a>
                <a style="margin-left:20px;" href="">G</a>
                <a   style="margin-left:20px;"  href="">J</a>
                <a style="margin-left:20px;"  href="">I</a>
                <a style="margin-left:20px;" href="">E</a></p3>


        </div>
        <div class="two2">
             <p1 style="position:absolute;left:320px;font-size:20px;color:white;margin-top:10px;">首页 |</p1>
            <p2   style="position:absolute;left:380px;font-size:20px;color:white;margin-top:10px;">全部商品</p2>
        </div>



    </div>

    <div class="three">;
        <div class="box">
            <ul id="tab">

                <li class="current">
                    <!--<img   style="position:absolute;width:450px;height:700px;top:380px;left:350px;"src="img3/17.jpg" alt=""/>-->
                </li>
                <li><img  style="position:absolute;left:400px;top:1100px;width:100px;height:100px;"  src="img3/6.jpg" alt=""/></li>
                <li><img  style="position:absolute;left:500px;top:1100px;width:90px;height:90px;" src="img3/10.jpg" alt=""/></li>
                <li><img style="position:absolute;left:600px;top:1098px;width:100px;height:100px;" src="img3/9.jpg" alt=""/></li>
                <li><img style="position:absolute;left:900px;top:650px;width:100px;height:100px;" src="img3/19.jpg" alt=""/></li>
                <li><img style="position:absolute;left:1010px;top:650px;width:100px;height:100px;" src="img3/20.jpg" alt=""/></li>
                <li><img style="position:absolute;left:1110px;top:650px;width:110px;height:100px;" src="img3/11.jpg" alt=""/></li>
                <div style="clear:both"></div>
            </ul>
        </div>
        <div id="content">
                 <ul style="display:block;">
                     <li><img   style="position:absolute;left:330px;top:380px;width:530px;height:700px;"  src="img3/6.jpg" alt=""/></li>

                 </ul>
            <ul>
                <li><img style="position:absolute;left:330px;top:380px;width:530px;height:700px;" src="img3/10.jpg" alt=""/></li>

            </ul>
            <ul>
                <li><img  style="position:absolute;left:330px;top:380px;width:530px;height:700px;" src="img3/9.jpg" alt=""/></li>

            </ul>
            <ul>
                <li><img  style="position:absolute;left:300px;top:380px;width:530px;height:700px;" src="img3/19.jpg" alt=""/></li>

            </ul>
            <ul>
                <li><img  style="position:absolute;left:300px;top:380px;width:530px;height:700px;" src="img3/20.jpg" alt=""/></li>

            </ul>
            <ul>
                <li><img  style="position:absolute;left:300px;top:380px;width:530px;height:700px;" src="img3/11.jpg" alt=""/></li>

            </ul>

        </div>



        <div class="three2">
            <h1 style="position:absolute;left:850px;top:380px;font-size:25px;color:black;">
               <b> 2016新款舒美姿泳 时尚休闲镂空罩衫蕾丝</b></h1>
                <h2 style="position:absolute;left:850px;top:410px;font-size:25px;color:black;">性感防晒泳装针织衫</h2>

               <ul style="width:480px;height:120px;background-color:lightgray;position:absolute;
               position:absolute;left:850px;top:450px;color:black;">
                <li style="margin-top:15px;">价格：￥57</li>
                 <li style="position:absolute;left:300px;height:500px;top:50px;">评价：9 <a href="">累计销量：69</a></li>
                <li style="margin-top:15px;">促销价：
                    <b><a style="font-size:25px;color:red;"href="">￥39.9-￥42.07</b></a></li>
                <li style="margin-top:15px;">店铺优惠：32元另选两件</li>
            </ul>

             <div>
            <p1  style="position:absolute;left:850px;top:600px;">客服：
                <input style="width:100px;height:20px;margin-left:20px;" type="text"  value="联系客服"/></p1>

            <p2 style="position:absolute;left:850px;top:680px;width:100px;height:100px;" >款式；</p2>

            <p3 style="position:absolute;left:850px;top:780px;">尺码:
                <input style="width:50px;height:20px;margin-left:25px;" type="text"  value="均码"/>
            </p3>

                 <input style="width:200px;height:50px;position:absolute;left:900px;top:850px;
                  font-size:20px;background-color:red;color:white;"
                        type="text"  value="立刻购买" />

                 <input style="width:200px;height:50px;position:absolute;left:1120px;top:850px;font-size:20px;"
                        type="text" value="加入购物车"/>

                 <img style="position:absolute;left:900px;top:920px;"  src="img3/22 (2).png" alt=""/>
                 <img style="position:absolute;left:980px;top:920px;"  src="img3/22 (1).png" alt=""/>
                 <p4  style="position:absolute;left:1080px;top:925px;">举报</p4>


           </div>









        </div>
        <div class="three3">
            <p style="font-size:20px;color:lightgrey;margin-left:60px;position:absolute;top:5px;">热卖推荐</p>
           <div>
            <img style="width:150px;height:200px;margin-top:30px;margin-left:25px;"src="img3/22.jpg" alt=""/>
            <p  style="font-size:18px;margin-left:80px;">￥19.95</p>

           </div>
            <div>
            <img style="width:150px;height:200px;margin-top:30px;margin-left:25px;" src="img3/23.jpg" alt=""/>
            <p style="font-size:18px;margin-left:80px;">￥39.2</p>

          </div>
            <div>
            <img style="width:150px;height:200px;margin-top:30px;margin-left:25px;" src="img3/24.jpg" alt=""/>
            <p  style="font-size:18px;margin-left:80px;">￥21.4</p>

        </div>


        </div>

    </div>



    <div class="four">
        <div class="four1">
            <div style="width:180px;height:50px;background-color:lightgrey;">
            <p style="font-size:20px;color:black;position:absolute;margin-left:60px;margin-top:20px;">女生街</p>
        </div>

            <div>
                <ul style="position:absolute;left:10px;top:50px;">
                    <li>描述</li>
                    <li style="color:red;">4.57</li>
                </ul>
                <ul  style="position:absolute;left:50px;top:50px;">
                    <li>价格</li>
                    <li  style="color:red;">4.6</li>
                </ul>
                <ul style="position:absolute;left:90px;top:50px;">
                    <li>质量</li>
                    <li  style="color:red;">4.6</li>
                </ul>
                <ul style="position:absolute;left:130px;top:50px;">
                    <li>服务</li>
                    <li  style="color:red;">4.58</li>
                </ul>

            </div>


            <input style="width:70px;height:15px;margin-top:50px;margin-left:10px;"  type="text" value="收藏店铺"/>

            <input  style="width:70px;height:15px;margin-top:50px;margin-left:10px;" type="text" value="进入店铺"/>
            <input style="width:80px;height:15px;margin-top:30px;margin-left:10px;" type="text"/>
            <input style="width:70px;height:15px;margin-top:30px;background-color:black;color:white; "  type="text" value="店内搜索"/>
            <img  style="width:20px;height:20px;position:absolute;left:10px;margin-top:30px;"   src="img2/12.jpg" alt=""/>
             <p1 style="font-size:12px;color:red;position:absolute;top:200px; margin-left:35px;">本小店由小店提供支持</p1>
             <p2   style="font-size:10px;color:lightgrey;margin-left:35px;">www.xiaodian.com</p2>




        </div>



        <div class="four2">
            <p  style="font-size:20px;color:black;position:absolute;
            width:180px;height:40px;background-color:lightgrey;">
                <a style="margin-left:50px;position:absolute;top:10px;"  href="">本店分类</a></p>

            <ul >
                <li  style="margin-top:60px;margin-left:40px;">全部商品 </li>
                <li  style="margin-top:10px;margin-left:40px;" >潮流男装区</li>
                <li  style="margin-top:10px;margin-left:40px;">潮流女装区</li>
                <li  style="margin-top:10px;margin-left:40px;">潮流帽子区</li>
                <li  style="margin-top:10px;margin-left:40px;">潮流饰品区</li>
                <li  style="margin-top:10px;margin-left:40px;">潮流手表区</li>
                <li  style="margin-top:10px;margin-left:40px;">泳衣区</li>
                <li  style="margin-top:10px;margin-left:40px;">潮流眼镜区</li>
                <li  style="margin-top:10px;margin-left:40px;">包包区</li>
                <li  style="margin-top:10px;margin-left:40px;">鞋类区</li>
                <li style="margin-top:10px;margin-left:40px;">手机壳</li>
                <li  style="margin-top:10px;margin-left:40px;">其他</li>
                <li  style="margin-top:10px;margin-left:40px;">【32元2件】</li>

            </ul>


        </div>


        <div class="four3">

            <p  style="font-size:20px;color:black;position:absolute;
            width:180px;height:40px;background-color:lightgrey;">
                <a style="margin-left:50px;color:black;position:absolute;top:10px;"  href="">看了又看</a></p>


            <div>
                <img style="width:150px;height:200px;margin-top:30px;margin-left:15px;"src="img3/22.jpg" alt=""/>
                <p  style="font-size:18px;margin-top:10px;margin-left:10px;">小巧气质简洁精致女..</p>

                <p  style="font-size:18px;margin-left:10px;">￥19.95</p>

            </div>
            <div>
                <img style="width:150px;height:200px;margin-top:30px;margin-left:15px;" src="img3/23.jpg" alt=""/>
                <p style="font-size:18px;margin-left:10px;">2016新款女包韩版..</p>
                <p  style="font-size:18px;margin-left:10px;">￥39.95</p>

            </div>
            <div>
                <img style="width:150px;height:200px;margin-top:30px;margin-left:15px;" src="img3/24.jpg" alt=""/>
                <p style="font-size:18px;margin-left:10px;">【网红林珊珊同款】</p>
                <p  style="font-size:18px;margin-left:10px;">￥21.4</p>

            </div>
            <div>
                <img style="width:150px;height:200px;margin-top:30px;margin-left:15px;" src="img3/25.jpg" alt=""/>
                <p style="font-size:18px;margin-left:10px;">2016夏新款女装韩..</p>
                <p  style="font-size:18px;margin-left:10px;">￥28.84</p>

            </div>
            <div>
                <img style="width:150px;height:200px;margin-top:30px;margin-left:15px;" src="img3/26.jpg" alt=""/>
                <p style="font-size:18px;margin-left:10px;">韩版学院复古原型..</p>
                <p  style="font-size:18px;margin-left:10px;">￥12.95</p>

            </div>
            <div>
                <img style="width:150px;height:200px;margin-top:30px;margin-left:15px;" src="img3/27.jpg" alt=""/>
                <p style="font-size:18px;margin-left:10px;">【送境袋境布】.</p>
                <p  style="font-size:18px;margin-left:10px;">￥21.4</p>

            </div>






        </div>




    </div>



    <div class="five">
        <div class="five1">
            <div style="width:150px;height:70px;font-size:20px;
            "><a style="margin-left:40px;top:20px;position:absolute;color:black;" href=""> 商品详情</a> </div>

            <div style="width:150px;height:70px;position:absolute;left:150px;top:0px;
            font-size:20px;border:1px solid #ccc;background-color:lightgrey; ">
                <a style="margin-left:40px;top:20px;position:absolute;color:black;" href="">累计评价1 </a>
            </div>

            <div style="width:150px;height:70px;position:absolute;left:300px;top:0px;
            font-size:20px;border:1px solid #ccc;background-color:lightgrey; ">
                <a style="margin-left:40px;top:20px;position:absolute;color:black;" href="">同类商品 </a>
            </div>

            <div style="width:280px;height:70px;position:absolute;left:450px;top:0px;
            font-size:20px;border:1px solid #ccc;background-color:lightgrey; ">
                <a style="margin-left:40px;top:20px;position:absolute;color:black;" href=""> 手机扫码下单</a>
            </div>






        </div>

        <div class="five2">
            <p style="font-size:20px;color:black;position:absolute;top:100px;margin-left:20px;"><b>商品描述</b></p>
            <div style="margin-top:60px;padding:0; width:80px;height:1px;background-color:lightgray;margin-left:20px;
                     "></div>
            <p style="font-size:18px;margin-left:20px;margin-top:10px;">五星好评+晒图立即返现2元</p>



        </div>

        <div class="five3">
            <p style="font-size:20px;color:black;position:absolute;top:230px;margin-left:20px;"><b>产品参数</b></p>
            <div style="margin-top:100px;padding:0; width:80px;height:1px;background-color:lightgray;margin-left:20px;
                     "></div>
            <img style="margin-top:20px;margin-left:10px;" src="img3/28.png" alt=""/>





        </div>

        <div class="five4">
            <p style="font-size:20px;color:black;position:absolute;top:500px;margin-left:20px;"><b>穿着效果</b></p>
            <div style="margin-top:70px;padding:0; width:80px;height:1px;background-color:lightgray;margin-left:20px;
             "></div>
            <img src="img3/11.jpg" alt=""/>
            <img src="img3/3.jpg" alt=""/>
            <img src="img3/4.jpg" alt=""/>
            <img src="img3/7.jpg" alt=""/>
            <img style="margin-left:20px;" src="img3/8.jpg" alt=""/>
            <img src="img3/6.jpg" alt=""/>
            <img src="img3/9.jpg" alt=""/>
            <img src="img3/10.jpg" alt=""/>




        </div>




    </div>


    <div class="six">
        <div class="six1">
            <img style="width:30px;height:30px;margin-left:63px;margin-top:20px;" src="img2/11.jpg" alt=""/>
            <p style="font-size:22px;color:black;margin-left:95px;margin-top:-20px;">加入购物车</p>


        </div>
        <div class="six2">
            <div>
                <img style="width:30px;height:20px;position:absolute;left:90px;top:100px;" src="img2/15.jpg"  alt=""/>
                <p style="font-size:16px;color:black;position:absolute;left:120px;top:100px;">
                    <b>商品描述</b></p>

            </div>

            <div>
                <img style="width:30px;height:20px;position:absolute;left:90px;top:150px;" src="img2/15.jpg"  alt=""/>
                <p style="font-size:16px;color:lightgrey;position:absolute;left:120px;top:150px;">
                    <b>产品参数</b></p>

            </div>

            <div>
                <img style="width:30px;height:20px;position:absolute;left:90px;top:200px;" src="img2/15.jpg"  alt=""/>
                <p style="font-size:16px;color:lightgrey;position:absolute;left:120px;top:200px;">
                    <b>穿着效果</b></p>

            </div>

            <div>
                <img style="width:30px;height:20px;position:absolute;left:90px;top:250px;" src="img2/15.jpg"  alt=""/>
                <p style="font-size:16px;color:lightgrey;position:absolute;left:120px;top:250px;">
                    <b>细节做工</b></p>

            </div>

            <div>
                <img style="width:30px;height:20px;position:absolute;left:90px;top:300px;" src="img2/15.jpg"  alt=""/>
                <p style="font-size:16px;color:lightgrey;position:absolute;left:120px;top:300px;">
                    <b>尺码说明</b></p>

            </div>


            <div>
                <img style="width:30px;height:20px;position:absolute;left:90px;top:350px;" src="img2/15.jpg"  alt=""/>
                <p style="font-size:16px;color:lightgrey;position:absolute;left:120px;top:350px;">
                    <b>商品推荐</b></p>

            </div>

        </div>













    </div>

    </div>

</body>
</html>
<script>
    $(function(){
        //确认下要操作的元素是谁？tab下面所有的li
        $('#tab li img').each(function(index){


            $(this).hover(function(){
                $('#tab li img').each(function(index){
                    $('#tab li img').eq(index).removeClass('current');

                })
                $(this).addClass('current');
                $('#content ul img').each(function(index){
                    $('#content ul img').eq(index).css('display','none');
                })
                $('#content ul img').eq(index).css('display','block');

            })
        })
    })




    $(function(){
        $('.drop-contentb').css('display','none')
        $('.drop-contentc').css('display','none')
        $('.drop-contentd').css('display','none')
        $('.a').hover(function(){
            $('.drop-contentb').css('display','block')
        },function(){
            $('.drop-contentb').css('display','none')
        })

        $('.jiamiao123').hover(function(){
            $('.drop-contenta').css('display','block')
        },function(){
            $('.drop-contenta').css('display','none')
        })

        $('.kehu').hover(function(){
            $('.drop-contentc').css('display','block')
        },function(){
            $('.drop-contentc').css('display','none')
        })


        $('.xiaodian').hover(function(){
            $('.drop-contentd').css('display','block')
        },function(){
            $('.drop-contentd').css('display','none')
        })
    })

</script>

